<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createPointsGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";
import AceEditor from "@/components/aceEditor.vue";

const htmlStr = ref(`
<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import {nextTick, onMounted, ref} from "vue";
import {
  loadModelLayer,
  createPointsGraphics
} from "../../common/loadLayers";
import gisTools from "../../common/GisTools";

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError: 1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value, [113.59, 34.74], 3000);
  createPointsGraphics(cViewer.value,{
    "dataJson":[  {    geometry:[113.593,34.75,100],property:{"name":"名称",id:"212121",text:"广告标牌"}  }  ],
    billboardConfig:{pixelOffset:{x:0,y:10}},
    labelConfig:{pixelOffset:{ x:0,y:-60}, fontSize:20}
  })
  createPointsGraphics(cViewer.value,{
    "dataJson":[  {    geometry:[113.59,34.74,100],property:{"name":"名称",id:"212121",text:"广告标牌"}  }  ],
    billboardConfig:{pixelOffset:{x:0,y:10},image:'map_marker/bb2.png'   },
    labelConfig:{pixelOffset:{ x:0,y:30}, fontSize:20}
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(() => {
    renderStart();
  })
})
<\/script>

<style lang="scss" scoped>
#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>

`);

const tsStr = ref(`

/**
 * 创建点信息
 * @function
 * @param {object} options
 * @param {Array} options.dataJson - 数据数组
 * [  {    geometry:[jd,wd,height],property:{"name":"名称",id:"",text:""}  }  ]
 * @param {boolean} options.pointConfig - 单点的样式配置
 * { color:"#ffffff",pixelSize:5,outlineColor:"#ffffff" ,outlineWidth:1 }
 * @param {object} options.billboardConfig - 绘制billboard图形的参数
 * {image:'图片路径',width:35,height:35,scale:1,pixelOffset:{x:0,y:-20},distanceDisplay:{min:100,max:1000} }
 * @param {object} options.labelConfig - 绘制label图形的参数
 * {fillColor:"#ffffff",outlineWidth:2,showBackground:true/false,backgroundColor:"#ffffff",pixelOffset:{x:0,y:-20},fontSize:14 }
 */
const createPointsGraphics = (viewer: any, options: any) => {
    let {dataJson, pointConfig, billboardConfig, labelConfig} = options;
    if (!dataJson || dataJson.length === 0) {
        return;
    }
    let points: any = [];
    dataJson.forEach((item: any) => {
        //format:[jd,wd,height]
        let geometry = item['geometry'];
        let property = item['property'];
        let entity: any = new Cesium.Entity();
        entity.name = property['name'];
        entity.oid = property['id'];
        entity.position = Cesium.Cartesian3.fromDegrees(geometry[0], geometry[1], geometry[2]);
        if (pointConfig) {
            //单点样式存在
            let {color, pixelSize, outlineColor, outlineWidth} = pointConfig;
            entity.point = new Cesium.PointGraphics({
                color: Cesium.Color.fromCssColorString(color || '#90EE90') ,
                pixelSize: pixelSize || 5,
                outlineColor: outlineColor || Cesium.Color.WHITE,
                outlineWidth: outlineWidth || 1,
            });
        }
        if (billboardConfig) {
            //图片的样式存在
            let {image, width, height, scale, pixelOffset, distanceDisplay} = billboardConfig;
            if(!pixelOffset){pixelOffset={x:0,y:15}}
            if(!distanceDisplay){ distanceDisplay={ min:10,max:30000000000 } }
            entity.billboard = new Cesium.BillboardGraphics({
                image: getAssetsFile(image || 'map_marker/bb1.png'),
                width: width || 200,
                height: height || 125,
                // clampToGround: clampToGround || true,
                scale: scale || 1,
                // eyeOffset :new Cesium.Cartesian2(0, -20),
                pixelOffset:  new Cesium.Cartesian2(pixelOffset['x'] , pixelOffset['y'] ) ,
                //最小距离，最大距离
                distanceDisplayCondition: new Cesium.DistanceDisplayCondition(distanceDisplay['min'], distanceDisplay['max'])
            });
        }
        if (labelConfig) {
            //文字样式
            let {fillColor, outlineWidth, showBackground, backgroundColor, pixelOffset,fontSize} = labelConfig;
            if(!pixelOffset){pixelOffset={x:0,y:-20}}
            let text = property['text'];
            entity.label = new Cesium.LabelGraphics({
                //文字标签
                text: text,
                font: '14px sans-serif',
                fillColor:Cesium.Color.fromCssColorString(fillColor|| '#FF0000'),
                style: Cesium.LabelStyle.FILL_AND_OUTLINE,
                outlineWidth: outlineWidth || 2,
                showBackground: showBackground || false,
                backgroundColor: Cesium.Color.fromCssColorString(backgroundColor || '#ffffff').withAlpha(0.8),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                pixelOffset:new Cesium.Cartesian2(pixelOffset['x'] , pixelOffset['y'] )
                //heightReference:Cesium.HeightReference.RELATIVE_TO_GROUND
            });
        }
        points.push(viewer.entities.add(entity));
    })

    return points;

}
export {
   createPointsGraphics
}
`);

const renderStart = () => {
  loadModelLayer(
      cViewer.value,
      '/public/otherModal/cityHouse/tileset.json',
      "md2_tiles",
      {
        spaceError: 1,
        bLocTo: false,
        height: 0,
        offset: {
          "tx": 113.58,
          "ty": 34.78,
          "tz": 0,
          "rx": 0,
          "ry": 0,
          "rz": 0
        }
      }
  );
  gisTools.cameraFlyToPoint(cViewer.value, [113.59, 34.74], 3000);
  createPointsGraphics(cViewer.value,{
    "dataJson":[  {    geometry:[113.593,34.75,100],property:{"name":"名称",id:"212121",text:"广告标牌"}  }  ],
    billboardConfig:{pixelOffset:{x:0,y:10}},
    labelConfig:{pixelOffset:{ x:0,y:-60}, fontSize:20}
  })
  createPointsGraphics(cViewer.value,{
    "dataJson":[  {    geometry:[113.59,34.74,100],property:{"name":"名称",id:"212121",text:"广告标牌"}  }  ],
    billboardConfig:{pixelOffset:{x:0,y:10},image:'map_marker/bb2.png'   },
    labelConfig:{pixelOffset:{ x:0,y:30}, fontSize:20}
  })
}
const cViewer = ref();
onMounted(() => {
  cViewer.value = initMap("load4490_box")
  nextTick(() => {
    renderStart();
  })
})
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 40px);
  min-width: 100px;
  width: auto;
  top: 80px;
  height: 60px;
  z-index: 10;
}
</style>
